<template>
  <div>
    <header class="top_header" :class="{ active: !isTop }">
      <div class="lef"><van-icon name="chat-o" /></div>
      <div class="mid">
        <div class="mid-box">码路严选|全心全意为学员服务</div>
      </div>
      <div class="rig"><van-icon name="user-o" /></div>
    </header>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1baeae">
      <van-swipe-item v-for="(item, index) in carousels" :key="index">
        <img v-lazy="item.carouselUrl" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="5">
      <van-grid-item
        v-for="value in gridList"
        :key="value.id"
        :icon="value.icon"
        :text="value.text"
      />
    </van-grid>
    <GoodsList :dataList="newGoodses">
      <template #title>
        <div>新品上线</div>
      </template>
    </GoodsList>
    <GoodsList :dataList="hotGoodses">
      <template #title>
        <div>热销商品</div>
      </template>
    </GoodsList>
    <GoodsList :dataList="recommendGoodses">
      <template #title>
        <div>最新推荐</div>
      </template>
    </GoodsList>
  </div>
</template>

<script>
import GoodsList from "@/components/GoodsList.vue";
import Vue from "vue";
import { Swipe, SwipeItem, Lazyload, Grid, GridItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Lazyload);
Vue.use(Grid);
Vue.use(GridItem);
import { getIndexInfo } from "@/http/index.js";
export default {
  name: "Home",
  props: [],
  components: {
    GoodsList,
  },
  data() {
    return {
      isTop: true,
      carousels: [],
      hotGoodses: [],
      newGoodses: [],
      recommendGoodses: [],
      gridList: [
        { id: 1, icon: "cart-o", text: "码路超市" },
        { id: 2, icon: "goods-collect-o", text: "码路服饰" },
        { id: 3, icon: "free-postage", text: "全球购" },
        { id: 4, icon: "send-gift-o", text: "码路生鲜" },
        { id: 5, icon: "logistics", text: "码路到家" },
        { id: 6, icon: "after-sale", text: "充值缴费" },
        { id: 7, icon: "discount", text: "9.9元拼" },
        { id: 8, icon: "coupon-o", text: "领券" },
        { id: 9, icon: "balance-o", text: "省钱" },
        { id: 10, icon: "apps-o", text: "全部" },
      ],
    };
  },
  methods: {
    changeTop() {
      //console.log(666);
      let t = document.documentElement.scrollTop || document.body.scrollTop;
      if (t > 50) {
        // 添加背景色
        this.isTop = false;
      } else {
        // 移除背景色
        this.isTop = true;
      }
    },
  },
  created() {
    getIndexInfo().then((res) => {
      //console.log(res);
      if (res.resultCode == 200) {
        let { carousels, hotGoodses, newGoodses, recommendGoodses } = res.data;
        this.carousels = carousels;
        this.hotGoodses = hotGoodses;
        this.newGoodses = newGoodses;
        this.recommendGoodses = recommendGoodses;
      }
    });
  },
  mounted() {
    window.addEventListener("scroll", this.changeTop);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.changeTop);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.top_header {
  width: 100%;
  display: flex;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  &.active {
    background-color: #1baeae;
  }

  .lef {
    width: 15%;
    height: 40px;
    line-height: 40px;
    //background-color: red;
  }
  .mid {
    width: 70%;
    height: 40px;
    line-height: 40px;
    //background-color: yellow;
    display: flex;
    align-items: center;

    .mid-box {
      border: 1px solid #fff;
      border-radius: 20px;
      height: 30px;
      line-height: 30px;
      width: 100%;
      background-color: #fff;
      opacity: 0.5;
    }
  }
  .rig {
    width: 15%;
    height: 40px;
    line-height: 40px;
    //background-color: blue;
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  img {
    width: 100%;
    height: 200px;
  }
}
</style>
